<!--
  author: tangcheng_cd
  create by: 2018/6/6
  descr: 新增修改面板
-->
<template>
  <el-dialog
    :title="dialogMode === 'ADD' ? '新增' : '编辑'"
    :visible.sync="dialogVisiable"
    v-model="dialogMode"
    @close="ardCancelBtnClick"
    class="mdp-add-modify-dialog"
    width="822px">
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      :label-position="'right'">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="元数据代码" prop="meta_id">
            <el-input v-model="formData.meta_id"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="英文包名" prop="pkg_name">
            <el-input v-model="formData.pkg_name"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="中文包名" prop="pkg_name_cns">
            <el-input v-model="formData.pkg_name_cns"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务描述" prop="busi_desc">
            <el-input v-model="formData.busi_desc"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="技术描述" prop="tech_desc">
            <el-input v-model="formData.tech_desc"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 提交的时候拆出开始时间beginDt和结束时间endDt -->
          <!--<el-form-item label="有效日期" prop="availDate">
            <el-date-picker v-model="formData.availDate"
                            type="daterange"
                            align="right"
                            unlink-panels
                            format="yyyy-MM-dd"
                            value-format="yyyyMMdd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>-->
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('form')" class="dialog-btn">重置</el-button>
      <el-button @click="ardCancelBtnClick" class="dialog-btn">关闭</el-button>
      <el-button @click="submitFormData" type="primary" class="dialog-btn">确定</el-button>
    </span>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
import ajax from '../../../../api/ajax/ajax'
import api from '../../../../api/url'
import {
  cnValidator,
  numLetteValidator
} from '../../../../assets/js/rules'

export default {
  name: 'mdp-add-modify-panel',
  data () {
    return {
      dialogVisiable: false, // 新增对话框显示控制
      dialogMode: { // 对话框色对话框模式  ADD新增 MODIFY 修改
        type: String,
        default: 'ADD'
      }, // 对话框模式
      currentItem: {
      }, // 表单初始化数据
      formData: {}, // 新增对话框表单数据
      formRules: {
        meta_id: [ // 元数据代码
          { required: true, message: '此项为必输项如', trigger: 'blur' },
          { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' },
          { validator: numLetteValidator, trigger: 'blur' }
        ],
        pkg_name: [ // 英文包名
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { validator: numLetteValidator, trigger: 'blur' },
          { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }
        ],
        pkg_name_cns: [ // 中文包名
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { validator: cnValidator, trigger: 'blur' },
          { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }
        ],
        busi_desc: [ // 业务描述
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 1, max: 160, message: '长度在 1 到 160 个字符', trigger: 'blur' }
        ],
        tech_desc: [ // 技术描述
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 1, max: 160, message: '长度在 1 到 160 个字符', trigger: 'blur' }
        ]
        // ,availDate: [ // 有效日期
        //   { required: true, message: '此项为必输项', trigger: 'blur' }
        // ]
      } // 新增对话框表单项规则
    }
  },
  methods: {
    // 新增显示对话框
    addShow () {
      // 显示新增对话框
      this.dialogVisiable = true
      // 新增对话框模式
      this.dialogMode = 'ADD'

      // 表单数据初始化
      this.currentItem = {}
      this.formData = {...this.currentItem}
      ajax.post(api.METAIDBUILDER, {meta_table_name: 'meta_datapkg'}).then((res) => {
        this.$set(this.formData, res.data)
      })
    },
    // 编辑显示对话框
    editShow (selNode) {
      // 显示编辑对话框
      this.dialogVisiable = true
      // 新增对话框模式
      this.dialogMode = 'MODIFY'

      // 表单数据初始化
      this.currentItem = selNode
      this.formData = {...this.currentItem}
    },
    // 取消操作
    ardCancelBtnClick () {
      this.dialogVisiable = false
      // 清空数据
      this.formData = {}
      // 清除验证
      this.$refs.form.clearValidate()
    },
    // 重置表单
    resetForm (formName) {
      this.formData = {...this.currentItem}
      // 清除验证
      this.$refs.form.clearValidate()
    },
    // 预处理表单数据
    preHandFormData (formData) {
      // let availDate = formData['availDate']

      return {
        // te_date: availDate[0],
        // le_date: availDate[1],
        ...formData
      }
    },
    // 提交新增数据
    submitFormData () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let postData = this.preHandFormData(this.formData)
          let callback = () => {
            // 隐藏新增对话框
            this.dialogVisiable = false
            // 数据清空
            setTimeout(() => {
              this.resetForm('form')
            }, 200)
            this.$emit('submitAfter', this)
          }
          if (this.dialogMode === 'ADD') {
            // 新增
            ajax.post(api.INSERT_META_DATAPKG, postData).then(res => {
              callback && callback()
            })
          } else {
            // 修改
            ajax.post(api.UPDATE_META_DATAPKG, postData).then(res => {
              callback && callback()
            })
          }
        } else {
          return false
        }
      })
    }
  },
  created () {
    // 默认表单数据初始化
    this.formData = JSON.parse(JSON.stringify(this.currentItem))
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .mdp-add-modify-dialog
    .el-form
      .el-date-editor
        width 260px !important
      .el-select
        width 100%
</style>
